<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="/layout/layout_nav_footer.xhtml">
	<ui:define name="titre">
		<p:graphicImage value="/img/urgences.png" />
	</ui:define>
	<ui:define name="content">
		<h:form styleClass="form-horizontal" style="max-width:500px;margin: 0 auto;">
			<fieldset>
			    <legend>Enregistrement</legend>
			    <div class="control-group">
			    	<h:outputLabel styleClass="control-label" for="firstname" value="Prénom :" />
			    	<div class="controls">
			      		<h:inputText id="firstname" value="#{registerbean.user.firstName}" requiredMessage="Votre prénom doit être renseigné" required="true">
			      			<f:validator validatorId="UserNameValidator" />
			      			<f:ajax event="blur" render="messageFirstName" />
			      		</h:inputText>
			      		<p:message id="messageFirstName" for="firstname" style="color:red" />
				    </div>
		  		</div>
		    	<div class="control-group">
			    	<h:outputLabel styleClass="control-label" for="lastname" value="Nom :" />
			    	<div class="controls">
			      		<h:inputText id="lastname" value="#{registerbean.user.lastName}" requiredMessage="Votre nom doit être renseigné" required="true">
			      			<f:validator validatorId="UserNameValidator" />
			      			<f:ajax event="blur" render="messageLastname" />
			      		</h:inputText>
			      		<p:message id="messageLastname" for="lastname" style="color:red" />
				    </div>
		  		</div>
		  		<div class="control-group">
			    	<h:outputLabel styleClass="control-label" for="age" value="Age :" />
			    	<div class="controls">
			      		<p:inputMask mask="99" id="age" value="#{registerbean.user.age}" requiredMessage="Votre âge doit être renseigné" required="true" >
			      			<f:validator validatorId="UserAgeValidator" />
			      			<f:ajax event="blur" render="messageAge" />
			      		</p:inputMask>
			      		<p:message id="messageAge" for="age" style="color:red" />
				    </div>
		  		</div>
		  		<div class="control-group">
			    	<h:outputLabel styleClass="control-label" for="mail" value="E-mail :" />
			    	<div class="controls">
			      		<h:inputText id="mail" value="#{registerbean.user.email}" requiredMessage="Votre email doit être renseigné" required="true">
			      			<f:validator validatorId="UserEmailValidator" />
			      			<f:ajax event="blur" render="messageEmail" />
			      		</h:inputText>
			      		<p:message id="messageEmail" for="mail" style="color:red" />
				    </div>
		  		</div>
		  		<div class="control-group">
			    	<h:outputLabel styleClass="control-label" for="login"  value="Login :" />
			    	<div class="controls">
			      		<h:inputText id="login" value="#{registerbean.user.login}" requiredMessage="Votre login doit être renseigné" required="true">
			      			<f:validator validatorId="UserLoginValidator" />
			      			<f:ajax event="blur" render="messageLogin" />
			      		</h:inputText>
			      		<p:message id="messageLogin" for="login" style="color:red" />
				    </div>
		  		</div>
		  		<div class="control-group">
			    	<h:outputLabel styleClass="control-label" for="password" value="Mot de passe :" />
			    	<div class="controls">
			      		<p:password id="password" value="#{registerbean.user.password}" required="true" requiredMessage="Votre mot de passe doit être renseigné" match="password2" >
			      			<f:validator validatorId="UserPasswordValidator" />
			      			<f:ajax event="blur" render="messagePassword2" />
			      		</p:password>
			      		<p:message id="messagePassword" for="password" style="color:red" />
				    </div>
		  		</div>
		  		<div class="control-group">
			    	<h:outputLabel styleClass="control-label" for="password2" value="Mot de passe* :" />
			    	<div class="controls">
			      		<p:password id="password2" value="#{registerbean.user.password}" requiredMessage="Votre mot de passe doit être confirmé" required="true"  >
			      			<f:ajax event="blur" render="messagePassword2" />
			      			<f:validator validatorId="UserPasswordValidator" />
			      		</p:password>
			      		<p:message id="messagePassword2" for="password2" style="color:red" />
				    </div>
		  		</div>
		  		<div class="control-group">
    				<div class="controls">
    					<h:commandButton id="buttonRegister" value="Je m'enregistre!" type="submit" styleClass="btn btn-primary" action="#{registerbean.register}" actionListener="#{registerbean.attrListener}" />
    					<h:commandButton value="Reset" type="reset" styleClass="btn btn-primary" action="#{registerbean.reset}" style="margin-left:10px"/>
    				</div>
    			</div>
		  	</fieldset>
		</h:form>
	</ui:define>
</ui:composition>